<!-- V2 -->
 <template>
   <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>

   </div>
 </template>

 <!-- <script lang="ts">
export default {
    name: 'Person',
}
</script> -->

<script lang="ts" setup name="Person">
  import {ref} from 'vue'

  // 数据，原来是写在data中的，此时name,age,tel都不是响应式的
  let name = ref('张三');
  let age = ref(25);
  let tel = '13812345678';
  // let address = '北京市海淀区';

  // 方法
  function changeName() {
    name.value = "李四" // 注意：这样修改name，页面是没有变化的
    console.log(name) // name确实改了，但name不是响应式的
  }
  function changeAge() {
    age.value = 26; // 注意：这样修改age，页面是没有变化的
    console.log(age) // age确实改了，但age不是响应式的
  }
  function showTel() {
    alert(tel);
  }
</script>

 <style scoped>
 .person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px
}
button {
  margin: 0 5px;
}
</style>